<template>
  <!--  租户条件-->
  <div style="width: 100%;text-align: left;margin-top: 10px">
    <el-tag>租户管理</el-tag>
  </div>
  <div style="background-color: white">
    <el-form :inline="true" :model="tenantDto">
      <el-form-item label="租户名称:">
        <el-input v-model="tenantDto.name" placeholder="租户名称" />
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="tenantDto.status" placeholder="请选择状态">
          <el-option label="正常" value="0" />
          <el-option label="异常" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList()">搜索</el-button>
        <el-button type="" @click="tenantDtoClear()">清空</el-button>
      </el-form-item>
    </el-form>
    <hr />
    <!--  按钮-->
    <div
      style="width: 100%; display: flex; flex-direction: row;text-align: center"
    >
      <div style="width: 50%;text-align: left">
        <el-button type="success" @click="tenantSaveShow()">
          <el-icon>
            <Plus />
          </el-icon>
          &nbsp;添加
        </el-button>
      </div>
      <div style="width: 50%;text-align: right">
        <el-icon style="margin-right: 5px">
          <Search />
        </el-icon>
        &nbsp;
        <el-icon style="margin-right: 5px">
          <Operation />
        </el-icon>
        &nbsp;
        <el-icon style="margin-right: 5px" @click="shuaXin()">
          <RefreshRight />
        </el-icon>
        &nbsp;
      </div>
    </div>
    <!--  列表-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="序号" />
      <el-table-column type="expand" label="部门">
        <template #default="props">
          <p v-for="(item, index) in props.row.deptList" :key="index">
            {{ item.name }}:
            <el-button
              v-for="(item1, index) in item.children"
              :key="index"
              size="mini"
            >
              {{ item1.name }}
            </el-button>
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="租户名称" />
      <el-table-column prop="code" label="租户编号" />
      <el-table-column prop="startTime" label="开始时间" />
      <el-table-column prop="endTime" label="结束时间" />
      <el-table-column label="状态" #default="scope">
        <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
          {{ scope.row.status === '0' ? '正常' : '异常' }}
        </el-tag>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="tenantUpdateShow(scope.row)"
          >
            <el-icon>
              <EditPen />
            </el-icon>
            &nbsp;编译
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="tenantDelete(scope.row.id)"
          >
            <el-icon>
              <Delete />
            </el-icon>
            &nbsp;删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页-->
    <div style="width: 100%;text-align: right">
      <el-pagination
        v-model:current-page="tenantDto.pageNum"
        v-model:page-size="tenantDto.pageSize"
        :page-sizes="[2, 5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tenantDto.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <!--  修改和添加弹窗-->
  <el-dialog
    v-model="dialogVisibleShow"
    :title="TipsShow"
    width="500"
    :before-close="handleClose"
  >
    <el-form
      :inline="true"
      ref="ruleFormRef"
      style="max-width: 900px"
      :model="tenant"
      :rules="rules"
      label-width="auto"
      :size="formSize"
      status-icon
    >
      <el-form-item label="租户id:" v-if="tenant.id != null">
        <el-input v-model="tenant.id" placeholder="租户id" disabled />
      </el-form-item>
      <br />
      <el-form-item label="租户名称:" prop="name">
        <el-input v-model="tenant.name" placeholder="租户名称" />
      </el-form-item>
      <el-form-item label="租户编号:" prop="code">
        <el-input-number
          v-model="tenant.code"
          :min="1"
          placeholder="租户编号"
        />
      </el-form-item>
      <br />
      <el-form-item label="开始时间" prop="date1">
        <el-date-picker
          v-model="tenant.startTime"
          type="datetime"
          placeholder="开始时间"
          clearable
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="date2">
        <el-date-picker
          v-model="tenant.endTime"
          type="datetime"
          placeholder="结束时间"
          clearable
          @change="handleEndTime()"
        />
      </el-form-item>
      <br />
      <el-form-item label="状态:">
        <el-radio-group v-model="tenant.status">
          <el-radio :value="0" label="0">正常</el-radio>
          <el-radio :value="1" label="1">异常</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div>
        <el-button @click="tenantSbt()">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { listPage, tSaveOrUpdate, tDelete } from '@/api/tenant'
import { ElMessage } from 'element-plus'
import moment from 'moment'
import momentTimezone from 'moment-timezone'

const tableData = ref([])
// 查所有参数条件
const tenantDto = ref({
  pageNum: 1,
  pageSize: 2,
  total: 10,
  name: null,
  status: null,
})
// 查所有
const getList = () => {
  try {
    listPage(tenantDto.value).then(res => {
      console.log(res)
      tableData.value = res.data.records
      tenantDto.value.total = res.data.total
    })
  } catch (error) {
    ElMessage.error('列表加载失败，请联系管理员')
  }
}
getList()
// 上下页
const handleSizeChange = val => {
  tenantDto.value.pageSize = val
  getList()
}
const handleCurrentChange = val => {
  tenantDto.value.pageNum = val
  getList()
}
// 清空条件
const tenantDtoClear = () => {
  tenantDto.value.name = null
  tenantDto.value.status = null
}
// 添加和修改
const dialogVisibleShow = ref(false)
const TipsShow = ref('无')
const tenant = ref({})
// 添加弹窗
const tenantSaveShow = () => {
  tenant.value = {}
  tenant.value.status = '0'
  dialogVisibleShow.value = true
  TipsShow.value = '添加'
}
//修改弹窗
const tenantUpdateShow = row => {
  tenant.value = row
  dialogVisibleShow.value = true
  TipsShow.value = '修改'
}
// 表单校验
const rules = {
  name: [{ required: true, message: '请输入租户名称', trigger: 'blur' }],
}
const handleEndTime = () => {
  if (tenant.value.startTime != null && tenant.value.endTime != null) {
    if (tenant.value.startTime > tenant.value.endTime) {
      ElMessage.error('结束时间不能小于开始时间')
      tenant.value.endTime = null
    }
  }
}
// 添加和修改提交按钮
const tenantSbt = () => {
  if (tenant.value.startTime) {
    tenant.value.startTime = momentTimezone(tenant.value.startTime)
      .tz('Asia/Shanghai')
      .format('YYYY-MM-DD HH:mm:ss')
  }
  if (tenant.value.endTime) {
    tenant.value.endTime = momentTimezone(tenant.value.endTime)
      .tz('Asia/Shanghai')
      .format('YYYY-MM-DD HH:mm:ss')
  }
  tSaveOrUpdate(tenant.value).then(res => {
    getList()
    ElMessage.success('操作成功')
    dialogVisibleShow.value = false
    tenant.value = {}
    console.log(res)
  })
}
// const tenantSbt = () => {
// tSaveOrUpdate(tenant.value).then(res=>{
//   getList();
//   ElMessage.success("操作成功");
//   dialogVisibleShow.value = false;
//   tenant.value = {};
//   console.log(res);
// })
// console.log(tenant.value);
// };
// 删除按钮
const tenantDelete = id => {
  console.log(id)
  if (confirm('确定删除吗？')) {
    tDelete(id).then(res => {
      getList()
      ElMessage.success('删除成功')
      dialogVisibleShow.value = false
    })
  }
}
// 刷新页面
const shuaXin = () => {
  location.reload()
}
</script>
